<template>
  <div class="container">
    <el-card class="tags" v-if="tags?.length !== 0">
      <el-tag class="tag" @click="handleTageChange(null)">所有板块</el-tag>
      <el-tag
        class="tag"
        type="success"
        v-for="tag in tags"
        @click="handleTageChange(tag.id)"
        >{{ tag.name }}</el-tag
      >
    </el-card>
    <x-post-list class="post-list" :posts="posts"></x-post-list>
    <x-pagination ref="pageRef" @reloadData="reloadData" />
    <el-backtop :right="100" :bottom="100" />
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { index } from "../../api/postAPI";

const tags = ref([]);
const posts = ref([]);
const pageRef = ref();

const handleTageChange = (id) => {
  const { page } = pageRef.value;
  page.tagId = id;
  reloadData();
};

const reloadData = () => {
  const { page } = pageRef.value;
  index(page).then(({ data }) => {
    tags.value = data.tags;
    posts.value = data.posts.data;
    page.page = data.posts.page;
    page.size = data.posts.size;
    page.total = data.posts.total;
    ElNotification({
      title: "欢迎访问 华夏交友圈",
      message: `当前在线人数: ${data.onLineUsers}, 最高纪录: ${data.onLineUsers}`,
      type: "success",
    });
  });
};
onMounted(() => {
  reloadData();
});
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.tags {
  width: 100%;
  margin-bottom: 10px;
}
.tag {
  margin-right: 10px;
}
.post-list {
  min-width: 800px;
}
.pagination {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
